<template>
	<view class="content">
		<view class="avatar">
			<view class="imageBox">
				<image class="img" :src="avatar"></image>
				<span>目前头像</span>
			</view>
		</view>
		<view class="avatar">
			<view class="imageBox">
				<image class="img" :src="newavatar"></image>
				<span>更新头像</span>
			</view>
		</view>
		<view class="btns">
			<block v-if="isChoose">
				<button type="primary" @click="updateNewAvatar">使用新头像</button>
				<button @click="giveUp">放弃修改</button>
			</block>
			<block v-else>
				<button type="primary" @click="chooseImage">上传新头像</button>
				<button @click="back">返回</button>
			</block>
		</view>
	</view>
</template>

<script>
	import doErro from "../../tools/doErro/index.js";
	import store from "@/store/index.js";
	import {
		mapGetters
	} from 'vuex' //引入mapState
	export default {
		name: "avatar",
		data() {
			return {
				//avatar: this.$store.state.avatar,
				newavatar: "",
				isChoose: false
			}
		},
		methods: {
			back() {
				this.$emit("back", "my")
			},
			async chooseImage() {
				await uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.newavatar = res.tempFilePaths[0];
						this.isChoose = true;
					},
					fail: (err) => {
						if(err.errMsg == "chooseImage:fail cancel"){
							return;
						}
						doErro.showErro(500);
					}
				})
			},
			updateNewAvatar() {
				let that = this;
				uni.showLoading({
					title: "图片上传中...",
					mask: true
				})
				uniCloud.uploadFile({
					filePath: that.newavatar,
					cloudPath: 'roomcenter/' + getApp().globalData.uid + '.jpg',
					fileType: 'image',
					onUploadProgress(progressEvent) {
						let percentCompleted = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						);
					},
					success(res) {
						//console.log(res.fileID);
						if (res.fileID) {
							store.commit("doavatar", {
								//avatar: "../../static/avatar.png"
								avatar: res.fileID
							});
							//that.avatar = res.result.avatarUrl;
							uniCloud.callFunction({
								name: "rc_user",
								data: {
									type: "changeAvatar",
									uid: getApp().globalData.uid,
									fileID: res.fileID
								},
								success(res) {
									//console.log(res.result.avatarUrl);
									if (res.result.avatarUrl) {
										//that.avatar = getApp().globalData.avatar = res.result.avatarUrl;
										that.newavatar = "";
										uni.hideLoading();
										uni.showModal({
											content: "修改成功"
										});
										that.isChoose = false;
									}
								},
								fail(err) {
									uni.hideLoading();
									doErro.showErro(500);
								}
							})
						} else {
							uni.hideLoading();
							doErro.showErro(500);
						}
					},
					fail(err) {
						uni.hideLoading();
						doErro.showErro(500);
					}
				});
			},
			giveUp() {
				this.isChoose = false;
			}
		},
		computed: {
			...mapGetters([
				'avatar'
			])
		}
	}
</script>

<style scoped lang="scss">
	.content {
		font-size: 38rpx;

		.avatar {
			margin-top: 100rpx;

			.imageBox {
				display: flex;
				flex-direction: column;
				text-align: center;

				.img {
					height: 150rpx;
					width: 150rpx;
					border: 4rpx solid lightgray;
					border-radius: 50%;
				}
			}
		}

		.btns {
			width: 100%;
			height: 200rpx;
			margin-top: 130rpx;

			button {
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
</style>